<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Responsive Admin Dashboard Template">
        <meta name="keywords" content="admin,dashboard">
        <meta name="author" content="skcats">
		<title></title>
		<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
        <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
        <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
        <link th:href="@{/assets/css/custom.css}" rel="stylesheet">
	</head>
	<style>
     ::-webkit-scrollbar {display:none}/*隐藏横向滚动条但可以滚动*/
     .layui-table-page {
         text-align: center;
     }

     .utable .layui-laypage .layui-laypage-curr .layui-laypage-em {
         background-color: #1E9FFF;
     }
     .layui-input-inline{margin-left: 50px;}
     .layui-form-item{margin-top: 20px;}
     .layui-form-label{width: 80px;}
     .layui-table-view thead th {
         text-align: center;
         font-weight: bold;
     }
     .layui-table-view tbody td {
         text-align: center;
     }
	</style>
<body>
    <div class="layui-btn-container">
        <a lay-event="fh" onclick="javascript:history.back(-1);"  style="text-decoration:none">
            <i class="layui-icon"style="font-size: 20px">&#xe65c;</i>
        </a>
    </div>

<input id="replyid" type="hidden" th:value="${replyid}"/>
<div id="main" style="height:520px;width:1250px"></div>

</body>
<script th:src="@{/assets/plugins/jquery/jquery-3.1.0.min.js}"></script>
<script th:src="@{/assets/plugins/echarts/echarts.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
    var replyid = $("#replyid").val();
    var mychart = echarts.init(document.getElementById("main"));
    $.ajax({
        url: '/classreply/chartdata',
        type: 'post',
        data: {
            id:replyid,
        },
        dataType: 'json',
        success:function(data){
            mychart.setOption({
                //图表标题
                title:{
                    text:'学生成绩详情表',
                    show:false //控制属性是否显示
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['考试成绩']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                //x轴
                xAxis:{
                    data:data.names,
                    axisLabel: {
                        formatter: function (value) {
                            return value.split("").join("\n")
                        }
                    }
                },
                //y轴
                yAxis:{},
                //系列
                series: [
                    {
                        name: '考试成绩',
                        type: 'bar',
                        data: data.datas,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            });
        },
    })
</script>
</html>